<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>uAdmin - Professional, Responsive and Flat Admin Template</title>
<meta name="description" content="uAdmin is a Professional, Responsive and Flat Admin Template created by pixelcave and published on Themeforest" />
<meta name="author" content="pixelcave" />
<meta name="robots" content="index, follow" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="shortcut icon" href="img/favicon.ico" />
<link rel="apple-touch-icon" href="img/apple-touch-icon.png" />
<link rel="apple-touch-icon" sizes="57x57" href="img/apple-touch-icon-57x57-precomposed.png" />
<link rel="apple-touch-icon" sizes="72x72" href="img/apple-touch-icon-72x72-precomposed.png" />
<link rel="apple-touch-icon" sizes="114x114" href="img/apple-touch-icon-114x114-precomposed.png" />
<link rel="apple-touch-icon-precomposed" href="img/apple-touch-icon-precomposed.png" />
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:400,400italic,700,700italic" />       
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/plugins.css" />
<link rel="stylesheet" href="css/main.css" />
<script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
<body>
<div id="page-container">
<header class="navbar navbar-inverse">
<div class="navbar-inner remove-radius remove-box-shadow">
<div class="container-fluid">
<ul class="nav pull-right visible-phone visible-tablet">
<li class="divider-vertical remove-margin"></li>
<li>
<a href="javascript:void(0)" data-toggle="collapse" data-target=".nav-collapse">
<i class="icon-reorder"></i>
</a>
</li>
</ul>
<a href="index.php" class="brand"><img src="img/template/logo.png" alt="logo" /></a>
<div id="loading" class="hide pull-left"><i class="icon-certificate icon-spin"></i></div>
<ul id="widgets" class="nav pull-right">
<li class="divider-vertical remove-margin"></li>
<li id="rss-widget" class="dropdown dropdown-left-responsive">
<a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">
<i class="icon-rss"></i>
<span class="badge badge-warning display-none"></span>
</a>
<ul class="dropdown-menu widget widget-fluid">
<li class="widget-heading text-center">Web Design</li>
<li class="li-hover"><a href="javascript:void(0)" class="widget-link"><i class="icon-umbrella"></i>This is a headline</a></li>
<li class="divider"></li>
<li class="li-hover"><a href="javascript:void(0)" class="widget-link"><i class="icon-trophy"></i>Another headline</a></li>
<li class="divider"></li>
<li class="li-hover"><a href="javascript:void(0)" class="widget-link"><i class="icon-suitcase"></i>Headlines keep coming!</a></li>
<li class="widget-heading text-center">Web Developent</li>
<li class="li-hover"><a href="javascript:void(0)" class="widget-link"><i class="icon-phone"></i>New headline</a></li>
<li class="divider"></li>
<li class="li-hover"><a href="javascript:void(0)" class="widget-link"><i class="icon-pencil"></i>Another one</a></li>
<li class="divider"></li>
<li><a href="javascript:void(0)" class="text-center">All News</a></li>
</ul>
</li>
<li class="divider-vertical remove-margin"></li>
<li id="twitter-widget" class="dropdown dropdown-left-responsive">
<a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">
<i class="icon-twitter"></i>
<span class="badge badge-info display-none"></span>
</a>
<ul class="dropdown-menu widget">
<li class="widget-heading"><i class="icon-comments-alt pull-right"></i>Latest Tweets</li>
<li class="li-hover">
<div class="media">
<a class="pull-left" href="javascript:void(0)">
<img src="img/placeholders/image_dark_64x64.png" alt="fakeimg" />
</a>
<div class="media-body">
<h6 class="media-heading"><a href="javascript:void(0)">Michael</a><span class="label label-info">just now</span></h6>
<div class="media">Web design all the way!</div>
</div>
</div>
</li>
<li class="divider"></li>
<li class="li-hover">
<div class="media">
<a class="pull-left" href="javascript:void(0)">
<img src="img/placeholders/image_dark_64x64.png" alt="fakeimg" />
</a>
<div class="media-body">
<h6 class="media-heading"><a href="javascript:void(0)">Monica</a><span class="label label-info">3 min ago</span></h6>
<div class="media">Download free PSDs at <a href="http://bit.ly/YUs4SQ" target="_blank">http://bit.ly/YUs4SQ</a></div>
</div>
</div>
</li>
<li class="divider"></li>
<li class="li-hover">
<div class="media">
<a class="pull-left" href="javascript:void(0)">
<img src="img/placeholders/image_dark_64x64.png" alt="fakeimg" />
</a>
<div class="media-body">
<h6 class="media-heading"><a href="javascript:void(0)">Steven</a><span class="label label-info">45 min ago</span></h6>
<div class="media">Be sure to check out my portfolio!</div>
</div>
</div>
</li>
<li class="divider"></li>
<li class="li-hover">
<div class="media">
<a class="pull-left" href="javascript:void(0)">
<img src="img/placeholders/image_dark_64x64.png" alt="fakeimg" />
</a>
<div class="media-body">
<h6 class="media-heading"><a href="javascript:void(0)">Tim</a><span class="label label-info">1 hour ago</span></h6>
<div class="media">Get all our themes for free for the next 2 hours! <a href="javascript:void(0)">#freebies</a></div>
</div>
</div>
</li>
</ul>
</li>
<li class="divider-vertical remove-margin"></li>
<li id="messages-widget" class="dropdown dropdown-left-responsive">
<a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">
<i class="icon-envelope"></i>
<span class="badge badge-success">1</span>
</a>
<ul class="dropdown-menu widget pull-right">
<li class="widget-heading"><i class="icon-comment pull-right"></i>Latest Messages</li>
<li class="new-on">
<div class="media">
<a class="pull-left" href="javascript:void(0)">
<img src="img/placeholders/image_light_64x64.png" alt="fakeimg" />
</a>
<div class="media-body">
<h6 class="media-heading"><a href="javascript:void(0)">George</a><span class="label label-success">2 min ago</span></h6>
<div class="media">Thanks for your help! The tutorial really helped me a lot!</div>
</div>
</div>
</li>
<li class="divider"></li>
<li>
<div class="media">
<a class="pull-left" href="javascript:void(0)">
<img src="img/placeholders/image_light_64x64.png" alt="fakeimg" />
</a>
<div class="media-body">
<h6 class="media-heading"><a href="javascript:void(0)">Mike</a><span class="label">6 hours ago</span></h6>
<div class="media">The logo is ready, have a look and let me know what you think!</div>
</div>
</div>
</li>
<li class="divider"></li>
<li>
<div class="media">
<a class="pull-left" href="javascript:void(0)">
<img src="img/placeholders/image_light_64x64.png" alt="fakeimg" />
</a>
<div class="media-body">
<h6 class="media-heading"><a href="javascript:void(0)">Julia</a><span class="label">1 day ago</span></h6>
<div class="media">We should better consider our social media marketing strategy!</div>
</div>
</div>
</li>
<li class="divider"></li>
<li class="text-center"><a href="javascript:void(0)">View All Messages</a></li>
</ul>
</li>
<li class="divider-vertical remove-margin"></li>
<li id="notifications-widget" class="dropdown dropdown-center-responsive">
<a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">
<i class="icon-flag"></i>
<span class="badge badge-important">1</span>
<span class="badge badge-warning">2</span>
</a>
<ul class="dropdown-menu widget">
<li class="widget-heading"><a href="javascript:void(0)" class="pull-right widget-link"><i class="icon-cog"></i></a><a href="javascript:void(0)" class="widget-link">System</a></li>
<li>
<ul>
<li class="label label-important">20 min ago</li>
<li class="text-error">Support system is down for maintenance!</li>
</ul>
</li>
<li>
<ul>
<li class="label label-warning">3 hours ago</li>
<li class="text-warning">PHP upgrade started!</li>
</ul>
</li>
<li>
<ul>
<li class="label label-warning">5 hours ago</li>
<li class="text-warning"><a href="javascript:void(0)" class="widget-link">1 support ticket</a> just opened!</li>
</ul>
</li>
<li class="widget-heading"><a href="javascript:void(0)" class="pull-right widget-link"><i class="icon-bookmark"></i></a><a href="javascript:void(0)" class="widget-link">Project #3</a></li>
<li>
<ul>
<li class="label label-success">3 weeks ago</li>
<li class="text-success">Project #3 <a href="javascript:void(0)" class="widget-link">published</a> successfully!</li>
</ul>
</li>
<li>
<ul>
<li class="label label-info">1 month ago</li>
<li class="text-info">Milestone #3 achieved!</li>
<li class="text-info"><a href="javascript:void(0)" class="widget-link">John Doe</a> joined the project!</li>
</ul>
</li>
<li>
<ul>
<li class="label">1 year ago</li>
<li class="text-muted">This is an old notification</li>
</ul>
</li>
<li class="divider"></li>
<li class="text-center"><a href="javascript:void(0)">View All Notifications</a></li>
</ul>
</li>
<li class="divider-vertical remove-margin"></li>
<li class="dropdown dropdown-user">
<a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown"><img src="img/template/avatar.png" alt="avatar" /> <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>
<a href="javascript:void(0)" class="loading-on"><i class="icon-refresh"></i> Refresh</a>
</li>
<li class="divider"></li>
<li>
<a href="#modal-user-settings" role="button" data-toggle="modal"><i class="icon-user"></i> User Profile</a>
</li>
<li>
<a href="javascript:void(0)"><i class="icon-wrench"></i> App Settings</a>
</li>
<li class="divider"></li>
<li>
<a href="page_login.php"><i class="icon-lock"></i> Log out</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</header>
<div id="inner-container"><aside id="page-sidebar" class="nav-collapse collapse">
<form id="sidebar-search" method="post" onsubmit="return false;" />
<div class="input-append">
<input type="text" placeholder="Search.." class="remove-box-shadow remove-transition remove-radius" />
<button><i class="icon-search"></i></button>
</div>
</form>
<nav id="primary-nav">
<ul>
<li>
<a href="index.php"><i class="icon-fire"></i>Dashboard</a>
</li>
<li>
<a href="#"><i class="icon-magic"></i>UI Elements</a>
<ul>
<li>
<a href="page_ui_general.php"><i class="icon-star"></i>General</a>
</li>
<li>
<a href="page_forms.php"><i class="icon-th-list"></i>Forms</a>
</li>
<li>
<a href="page_tables.php"><i class="icon-table"></i>Tables</a>
</li>
</ul>
</li>
<li class="active">
<a href="#"><i class="icon-leaf"></i>Components</a>
<ul>
<li>
<a href="page_charts.php"><i class="icon-bar-chart"></i>Charts</a>
</li>
<li>
<a href="page_calendar.php"><i class="icon-calendar"></i>Calendar</a>
</li>
<li>
<a href="page_datatables.php" class="active"><i class="icon-th"></i>DataTables</a>
</li>
</ul>
</li>
<li>
<a href="page_typography.php"><i class="icon-font"></i>Typography</a>
</li>
<li>
<a href="page_gallery.php"><i class="icon-picture"></i>Gallery</a>
</li>
<li>
<a href="#"><i class="icon-tint"></i>Icons</a>
<ul>
<li>
<a href="page_fontawesome.php">FontAwesome</a>
</li>
<li>
<a href="page_gemicon.php">Gemicon</a>
</li>
</ul>
</li>
<li>
<a href="#"><i class="icon-file-alt"></i>Pages</a>
<ul>
<li>
<a href="page_profile.php">Profile</a>
</li>
<li>
<a href="page_faq.php">Faq</a>
</li>
<li>
<a href="page_errors.php">Errors</a>
</li>
<li>
<a href="page_blank.php">Blank</a>
</li>
</ul>
</li>
<li>
<a href="page_login.php"><i class="icon-off"></i>Login Page</a>
</li>
</ul>
</nav>
</aside><div id="page-content">
<ul id="nav-info" class="clearfix">
<li><a href="index.php"><i class="icon-home"></i></a></li>
<li><a href="javascript:void(0)">Components</a></li>
<li class="active"><a href="">DataTables</a></li>
</ul>
<h3 class="page-header page-header-top">Advanced Tables <small>Full DataTables Integration</small></h3>
<table id="example-datatables" class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th class="span1"></th>
<th class="span1 hidden-phone">#</th>
<th><i class="icon-user"></i> Username</th>
<th class="hidden-phone hidden-tablet"><i class="icon-envelope-alt"></i> Email</th>
<th><i class="icon-bolt"></i> Status</th>
</tr>
</thead>
<tbody>
<tr>
<td class="span1">
<div class="btn-group">
<a href="javascript:void(0)" data-toggle="tooltip" title="Edit" class="btn btn-mini btn-success"><i class="icon-pencil"></i></a>
<a href="javascript:void(0)" data-toggle="tooltip" title="Delete" class="btn btn-mini btn-danger"><i class="icon-remove"></i></a>
</div>
</td>
<td class="span1 hidden-phone">1</td>
<td><a href="javascript:void(0)">username1</a></td>
<td class="hidden-phone hidden-tablet">user1@example.com</td>
<td><span class="label label-info">Manual Approval</span></td>
</tr>
<tr>
<td class="span1">
<div class="btn-group">
<a href="javascript:void(0)" data-toggle="tooltip" title="Edit" class="btn btn-mini btn-success"><i class="icon-pencil"></i></a>
<a href="javascript:void(0)" data-toggle="tooltip" title="Delete" class="btn btn-mini btn-danger"><i class="icon-remove"></i></a>
</div>
</td>
<td class="span1 hidden-phone">2</td>
<td><a href="javascript:void(0)">username2</a></td>
<td class="hidden-phone hidden-tablet">user2@example.com</td>
<td><span class="label">Inactive</span></td>
</tr>
<tr>
<td class="span1">
<div class="btn-group">
<a href="javascript:void(0)" data-toggle="tooltip" title="Edit" class="btn btn-mini btn-success"><i class="icon-pencil"></i></a>
<a href="javascript:void(0)" data-toggle="tooltip" title="Delete" class="btn btn-mini btn-danger"><i class="icon-remove"></i></a>
</div>
</td>
<td class="span1 hidden-phone">3</td>
<td><a href="javascript:void(0)">username3</a></td>
<td class="hidden-phone hidden-tablet">user3@example.com</td>
<td><span class="label label-success">Approved!</span></td>
</tr>
<tr>
<td class="span1">
<div class="btn-group">
<a href="javascript:void(0)" data-toggle="tooltip" title="Edit" class="btn btn-mini btn-success"><i class="icon-pencil"></i></a>
<a href="javascript:void(0)" data-toggle="tooltip" title="Delete" class="btn btn-mini btn-danger"><i class="icon-remove"></i></a>
</div>
</td>
<td class="span1 hidden-phone">4</td>
<td><a href="javascript:void(0)">username4</a></td>
<td class="hidden-phone hidden-tablet">user4@example.com</td>
<td><span class="label label-inverse">Spam Account</span></td>
</tr>
<tr>
<td class="span1">
<div class="btn-group">
<a href="javascript:void(0)" data-toggle="tooltip" title="Edit" class="btn btn-mini btn-success"><i class="icon-pencil"></i></a>
<a href="javascript:void(0)" data-toggle="tooltip" title="Delete" class="btn btn-mini btn-danger"><i class="icon-remove"></i></a>
</div>
</td>
<td class="span1 hidden-phone">5</td>
<td><a href="javascript:void(0)">username5</a></td>
<td class="hidden-phone hidden-tablet">user5@example.com</td>
<td><span class="label label-warning">Pending..</span></td>
</tr>
<tr>
<td class="span1">
<div class="btn-group">
<a href="javascript:void(0)" data-toggle="tooltip" title="Edit" class="btn btn-mini btn-success"><i class="icon-pencil"></i></a>
<a href="javascript:void(0)" data-toggle="tooltip" title="Delete" class="btn btn-mini btn-danger"><i class="icon-remove"></i></a>
</div>
</td>
<td class="span1 hidden-phone">6</td>
<td><a href="javascript:void(0)">username6</a></td>
<td class="hidden-phone hidden-tablet">user6@example.com</td>
<td><span class="label label-success">Approved!</span></td>
</tr>
<tr>
<td class="span1">
<div class="btn-group">
<a href="javascript:void(0)" data-toggle="tooltip" title="Edit" class="btn btn-mini btn-success"><i class="icon-pencil"></i></a>
<a href="javascript:void(0)" data-toggle="tooltip" title="Delete" class="btn btn-mini btn-danger"><i class="icon-remove"></i></a>
</div>
</td>
<td class="span1 hidden-phone">7</td>
<td><a href="javascript:void(0)">username7</a></td>
<td class="hidden-phone hidden-tablet">user7@example.com</td>
<td><span class="label label-important">Unapproved</span></td>
</tr>
<tr>
<td class="span1">
<div class="btn-group">
<a href="javascript:void(0)" data-toggle="tooltip" title="Edit" class="btn btn-mini btn-success"><i class="icon-pencil"></i></a>
<a href="javascript:void(0)" data-toggle="tooltip" title="Delete" class="btn btn-mini btn-danger"><i class="icon-remove"></i></a>
</div>
</td>
<td class="span1 hidden-phone">8</td>
<td><a href="javascript:void(0)">username8</a></td>
<td class="hidden-phone hidden-tablet">user8@example.com</td>
<td><span class="label">Inactive</span></td>
</tr>
<tr>
<td class="span1">
<div class="btn-group">
<a href="javascript:void(0)" data-toggle="tooltip" title="Edit" class="btn btn-mini btn-success"><i class="icon-pencil"></i></a>
<a href="javascript:void(0)" data-toggle="tooltip" title="Delete" class="btn btn-mini btn-danger"><i class="icon-remove"></i></a>
</div>
</td>
<td class="span1 hidden-phone">9</td>
<td><a href="javascript:void(0)">username9</a></td>
<td class="hidden-phone hidden-tablet">user9@example.com</td>
<td><span class="label label-info">Manual Approval</span></td>
</tr>
<tr>
<td class="span1">
<div class="btn-group">
<a href="javascript:void(0)" data-toggle="tooltip" title="Edit" class="btn btn-mini btn-success"><i class="icon-pencil"></i></a>
<a href="javascript:void(0)" data-toggle="tooltip" title="Delete" class="btn btn-mini btn-danger"><i class="icon-remove"></i></a>
</div>
</td>
<td class="span1 hidden-phone">10</td>
<td><a href="javascript:void(0)">username10</a></td>
<td class="hidden-phone hidden-tablet">user10@example.com</td>
<td><span class="label label-important">Unapproved</span></td>
</tr>
<tr>
<td class="span1">
<div class="btn-group">
<a href="javascript:void(0)" data-toggle="tooltip" title="Edit" class="btn btn-mini btn-success"><i class="icon-pencil"></i></a>
<a href="javascript:void(0)" data-toggle="tooltip" title="Delete" class="btn btn-mini btn-danger"><i class="icon-remove"></i></a>
</div>
</td>
<td class="span1 hidden-phone">11</td>
<td><a href="javascript:void(0)">username11</a></td>
<td class="hidden-phone hidden-tablet">user11@example.com</td>
<td><span class="label label-important">Unapproved</span></td>
</tr>
<tr>
<td class="span1">
<div class="btn-group">
<a href="javascript:void(0)" data-toggle="tooltip" title="Edit" class="btn btn-mini btn-success"><i class="icon-pencil"></i></a>
<a href="javascript:void(0)" data-toggle="tooltip" title="Delete" class="btn btn-mini btn-danger"><i class="icon-remove"></i></a>
</div>
</td>
<td class="span1 hidden-phone">12</td>
<td><a href="javascript:void(0)">username12</a></td>
<td class="hidden-phone hidden-tablet">user12@example.com</td>
<td><span class="label">Inactive</span></td>
</tr>
<tr>
<td class="span1">
<div class="btn-group">
<a href="javascript:void(0)" data-toggle="tooltip" title="Edit" class="btn btn-mini btn-success"><i class="icon-pencil"></i></a>
<a href="javascript:void(0)" data-toggle="tooltip" title="Delete" class="btn btn-mini btn-danger"><i class="icon-remove"></i></a>
</div>
</td>
<td class="span1 hidden-phone">13</td>
<td><a href="javascript:void(0)">username13</a></td>
<td class="hidden-phone hidden-tablet">user13@example.com</td>
<td><span class="label label-important">Unapproved</span></td>
</tr>
<tr>
<td class="span1">
<div class="btn-group">
<a href="javascript:void(0)" data-toggle="tooltip" title="Edit" class="btn btn-mini btn-success"><i class="icon-pencil"></i></a>
<a href="javascript:void(0)" data-toggle="tooltip" title="Delete" class="btn btn-mini btn-danger"><i class="icon-remove"></i></a>
</div>
</td>
<td class="span1 hidden-phone">14</td>
<td><a href="javascript:void(0)">username14</a></td>
<td class="hidden-phone hidden-tablet">user14@example.com</td>
<td><span class="label">Inactive</span></td>
</tr>
<tr>
<td class="span1">
<div class="btn-group">
<a href="javascript:void(0)" data-toggle="tooltip" title="Edit" class="btn btn-mini btn-success"><i class="icon-pencil"></i></a>
<a href="javascript:void(0)" data-toggle="tooltip" title="Delete" class="btn btn-mini btn-danger"><i class="icon-remove"></i></a>
</div>
</td>
<td class="span1 hidden-phone">15</td>
<td><a href="javascript:void(0)">username15</a></td>
<td class="hidden-phone hidden-tablet">user15@example.com</td>
<td><span class="label label-info">Manual Approval</span></td>
</tr>
<tr>
<td class="span1">
<div class="btn-group">
<a href="javascript:void(0)" data-toggle="tooltip" title="Edit" class="btn btn-mini btn-success"><i class="icon-pencil"></i></a>
<a href="javascript:void(0)" data-toggle="tooltip" title="Delete" class="btn btn-mini btn-danger"><i class="icon-remove"></i></a>
</div>
</td>
<td class="span1 hidden-phone">16</td>
<td><a href="javascript:void(0)">username16</a></td>
<td class="hidden-phone hidden-tablet">user16@example.com</td>
<td><span class="label label-info">Manual Approval</span></td>
</tr>
<tr>
<td class="span1">
<div class="btn-group">
<a href="javascript:void(0)" data-toggle="tooltip" title="Edit" class="btn btn-mini btn-success"><i class="icon-pencil"></i></a>
<a href="javascript:void(0)" data-toggle="tooltip" title="Delete" class="btn btn-mini btn-danger"><i class="icon-remove"></i></a>
</div>
</td>
<td class="span1 hidden-phone">17</td>
<td><a href="javascript:void(0)">username17</a></td>
<td class="hidden-phone hidden-tablet">user17@example.com</td>
<td><span class="label label-important">Unapproved</span></td>
</tr>
<tr>
<td class="span1">
<div class="btn-group">
<a href="javascript:void(0)" data-toggle="tooltip" title="Edit" class="btn btn-mini btn-success"><i class="icon-pencil"></i></a>
<a href="javascript:void(0)" data-toggle="tooltip" title="Delete" class="btn btn-mini btn-danger"><i class="icon-remove"></i></a>
</div>
</td>
<td class="span1 hidden-phone">18</td>
<td><a href="javascript:void(0)">username18</a></td>
<td class="hidden-phone hidden-tablet">user18@example.com</td>
<td><span class="label">Inactive</span></td>
</tr>
<tr>
<td class="span1">
<div class="btn-group">
<a href="javascript:void(0)" data-toggle="tooltip" title="Edit" class="btn btn-mini btn-success"><i class="icon-pencil"></i></a>
<a href="javascript:void(0)" data-toggle="tooltip" title="Delete" class="btn btn-mini btn-danger"><i class="icon-remove"></i></a>
</div>
</td>
<td class="span1 hidden-phone">19</td>
<td><a href="javascript:void(0)">username19</a></td>
<td class="hidden-phone hidden-tablet">user19@example.com</td>
<td><span class="label label-important">Unapproved</span></td>
</tr>
<tr>
<td class="span1">
<div class="btn-group">
<a href="javascript:void(0)" data-toggle="tooltip" title="Edit" class="btn btn-mini btn-success"><i class="icon-pencil"></i></a>
<a href="javascript:void(0)" data-toggle="tooltip" title="Delete" class="btn btn-mini btn-danger"><i class="icon-remove"></i></a>
</div>
</td>
<td class="span1 hidden-phone">20</td>
<td><a href="javascript:void(0)">username20</a></td>
<td class="hidden-phone hidden-tablet">user20@example.com</td>
<td><span class="label label-important">Unapproved</span></td>
</tr>
<tr>
<td class="span1">
<div class="btn-group">
<a href="javascript:void(0)" data-toggle="tooltip" title="Edit" class="btn btn-mini btn-success"><i class="icon-pencil"></i></a>
<a href="javascript:void(0)" data-toggle="tooltip" title="Delete" class="btn btn-mini btn-danger"><i class="icon-remove"></i></a>
</div>
</td>
<td class="span1 hidden-phone">21</td>
<td><a href="javascript:void(0)">username21</a></td>
<td class="hidden-phone hidden-tablet">user21@example.com</td>
<td><span class="label label-warning">Pending..</span></td>
</tr>
<tr>
<td class="span1">
<div class="btn-group">
<a href="javascript:void(0)" data-toggle="tooltip" title="Edit" class="btn btn-mini btn-success"><i class="icon-pencil"></i></a>
<a href="javascript:void(0)" data-toggle="tooltip" title="Delete" class="btn btn-mini btn-danger"><i class="icon-remove"></i></a>
</div>
</td>
<td class="span1 hidden-phone">22</td>
<td><a href="javascript:void(0)">username22</a></td>
<td class="hidden-phone hidden-tablet">user22@example.com</td>
<td><span class="label label-inverse">Spam Account</span></td>
</tr>
<tr>
<td class="span1">
<div class="btn-group">
<a href="javascript:void(0)" data-toggle="tooltip" title="Edit" class="btn btn-mini btn-success"><i class="icon-pencil"></i></a>
<a href="javascript:void(0)" data-toggle="tooltip" title="Delete" class="btn btn-mini btn-danger"><i class="icon-remove"></i></a>
</div>
</td>
<td class="span1 hidden-phone">23</td>
<td><a href="javascript:void(0)">username23</a></td>
<td class="hidden-phone hidden-tablet">user23@example.com</td>
<td><span class="label label-success">Approved!</span></td>
</tr>
<tr>
<td class="span1">
<div class="btn-group">
<a href="javascript:void(0)" data-toggle="tooltip" title="Edit" class="btn btn-mini btn-success"><i class="icon-pencil"></i></a>
<a href="javascript:void(0)" data-toggle="tooltip" title="Delete" class="btn btn-mini btn-danger"><i class="icon-remove"></i></a>
</div>
</td>
<td class="span1 hidden-phone">24</td>
<td><a href="javascript:void(0)">username24</a></td>
<td class="hidden-phone hidden-tablet">user24@example.com</td>
<td><span class="label label-success">Approved!</span></td>
</tr>
<tr>
<td class="span1">
<div class="btn-group">
<a href="javascript:void(0)" data-toggle="tooltip" title="Edit" class="btn btn-mini btn-success"><i class="icon-pencil"></i></a>
<a href="javascript:void(0)" data-toggle="tooltip" title="Delete" class="btn btn-mini btn-danger"><i class="icon-remove"></i></a>
</div>
</td>
<td class="span1 hidden-phone">25</td>
<td><a href="javascript:void(0)">username25</a></td>
<td class="hidden-phone hidden-tablet">user25@example.com</td>
<td><span class="label label-important">Unapproved</span></td>
</tr>
<tr>
<td class="span1">
<div class="btn-group">
<a href="javascript:void(0)" data-toggle="tooltip" title="Edit" class="btn btn-mini btn-success"><i class="icon-pencil"></i></a>
<a href="javascript:void(0)" data-toggle="tooltip" title="Delete" class="btn btn-mini btn-danger"><i class="icon-remove"></i></a>
</div>
</td>
<td class="span1 hidden-phone">26</td>
<td><a href="javascript:void(0)">username26</a></td>
<td class="hidden-phone hidden-tablet">user26@example.com</td>
<td><span class="label">Inactive</span></td>
</tr>
<tr>
<td class="span1">
<div class="btn-group">
<a href="javascript:void(0)" data-toggle="tooltip" title="Edit" class="btn btn-mini btn-success"><i class="icon-pencil"></i></a>
<a href="javascript:void(0)" data-toggle="tooltip" title="Delete" class="btn btn-mini btn-danger"><i class="icon-remove"></i></a>
</div>
</td>
<td class="span1 hidden-phone">27</td>
<td><a href="javascript:void(0)">username27</a></td>
<td class="hidden-phone hidden-tablet">user27@example.com</td>
<td><span class="label label-important">Unapproved</span></td>
</tr>
<tr>
<td class="span1">
<div class="btn-group">
<a href="javascript:void(0)" data-toggle="tooltip" title="Edit" class="btn btn-mini btn-success"><i class="icon-pencil"></i></a>
<a href="javascript:void(0)" data-toggle="tooltip" title="Delete" class="btn btn-mini btn-danger"><i class="icon-remove"></i></a>
</div>
</td>
<td class="span1 hidden-phone">28</td>
<td><a href="javascript:void(0)">username28</a></td>
<td class="hidden-phone hidden-tablet">user28@example.com</td>
<td><span class="label label-success">Approved!</span></td>
</tr>
<tr>
<td class="span1">
<div class="btn-group">
<a href="javascript:void(0)" data-toggle="tooltip" title="Edit" class="btn btn-mini btn-success"><i class="icon-pencil"></i></a>
<a href="javascript:void(0)" data-toggle="tooltip" title="Delete" class="btn btn-mini btn-danger"><i class="icon-remove"></i></a>
</div>
</td>
<td class="span1 hidden-phone">29</td>
<td><a href="javascript:void(0)">username29</a></td>
<td class="hidden-phone hidden-tablet">user29@example.com</td>
<td><span class="label label-success">Approved!</span></td>
</tr>
<tr>
<td class="span1">
<div class="btn-group">
<a href="javascript:void(0)" data-toggle="tooltip" title="Edit" class="btn btn-mini btn-success"><i class="icon-pencil"></i></a>
<a href="javascript:void(0)" data-toggle="tooltip" title="Delete" class="btn btn-mini btn-danger"><i class="icon-remove"></i></a>
</div>
</td>
<td class="span1 hidden-phone">30</td>
<td><a href="javascript:void(0)">username30</a></td>
<td class="hidden-phone hidden-tablet">user30@example.com</td>
<td><span class="label">Inactive</span></td>
</tr>
</tbody>
</table>
<h3 class="page-header">Datatables <small>In the grid</small></h3>
<div class="row-fluid">
<div class="span6">
<table id="example-datatables2" class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>#</th>
<th><i class="icon-user"></i> Username</th>
<th><i class="icon-bolt"></i> Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td><a href="javascript:void(0)">username1</a></td>
<td><span class="label label-info">Manual Approval</span></td>
</tr>
<tr>
<td>2</td>
<td><a href="javascript:void(0)">username2</a></td>
<td><span class="label">Inactive</span></td>
</tr>
<tr>
<td>3</td>
<td><a href="javascript:void(0)">username3</a></td>
<td><span class="label label-success">Approved!</span></td>
</tr>
<tr>
<td>4</td>
<td><a href="javascript:void(0)">username4</a></td>
<td><span class="label label-inverse">Spam Account</span></td>
</tr>
<tr>
<td>5</td>
<td><a href="javascript:void(0)">username5</a></td>
<td><span class="label">Inactive</span></td>
</tr>
<tr>
<td>6</td>
<td><a href="javascript:void(0)">username6</a></td>
<td><span class="label label-inverse">Spam Account</span></td>
</tr>
<tr>
<td>7</td>
<td><a href="javascript:void(0)">username7</a></td>
<td><span class="label label-success">Approved!</span></td>
</tr>
<tr>
<td>8</td>
<td><a href="javascript:void(0)">username8</a></td>
<td><span class="label label-important">Unapproved</span></td>
</tr>
<tr>
<td>9</td>
<td><a href="javascript:void(0)">username9</a></td>
<td><span class="label">Inactive</span></td>
</tr>
<tr>
<td>10</td>
<td><a href="javascript:void(0)">username10</a></td>
<td><span class="label">Inactive</span></td>
</tr>
<tr>
<td>11</td>
<td><a href="javascript:void(0)">username11</a></td>
<td><span class="label label-info">Manual Approval</span></td>
</tr>
<tr>
<td>12</td>
<td><a href="javascript:void(0)">username12</a></td>
<td><span class="label label-important">Unapproved</span></td>
</tr>
<tr>
<td>13</td>
<td><a href="javascript:void(0)">username13</a></td>
<td><span class="label">Inactive</span></td>
</tr>
<tr>
<td>14</td>
<td><a href="javascript:void(0)">username14</a></td>
<td><span class="label label-success">Approved!</span></td>
</tr>
<tr>
<td>15</td>
<td><a href="javascript:void(0)">username15</a></td>
<td><span class="label label-important">Unapproved</span></td>
</tr>
<tr>
<td>16</td>
<td><a href="javascript:void(0)">username16</a></td>
<td><span class="label label-info">Manual Approval</span></td>
</tr>
<tr>
<td>17</td>
<td><a href="javascript:void(0)">username17</a></td>
<td><span class="label label-inverse">Spam Account</span></td>
</tr>
<tr>
<td>18</td>
<td><a href="javascript:void(0)">username18</a></td>
<td><span class="label label-info">Manual Approval</span></td>
</tr>
<tr>
<td>19</td>
<td><a href="javascript:void(0)">username19</a></td>
<td><span class="label label-inverse">Spam Account</span></td>
</tr>
<tr>
<td>20</td>
<td><a href="javascript:void(0)">username20</a></td>
<td><span class="label label-success">Approved!</span></td>
</tr>
<tr>
<td>21</td>
<td><a href="javascript:void(0)">username21</a></td>
<td><span class="label label-success">Approved!</span></td>
</tr>
<tr>
<td>22</td>
<td><a href="javascript:void(0)">username22</a></td>
<td><span class="label label-important">Unapproved</span></td>
</tr>
<tr>
<td>23</td>
<td><a href="javascript:void(0)">username23</a></td>
<td><span class="label label-success">Approved!</span></td>
</tr>
<tr>
<td>24</td>
<td><a href="javascript:void(0)">username24</a></td>
<td><span class="label label-warning">Pending..</span></td>
</tr>
<tr>
<td>25</td>
<td><a href="javascript:void(0)">username25</a></td>
<td><span class="label label-warning">Pending..</span></td>
</tr>
<tr>
<td>26</td>
<td><a href="javascript:void(0)">username26</a></td>
<td><span class="label label-info">Manual Approval</span></td>
</tr>
<tr>
<td>27</td>
<td><a href="javascript:void(0)">username27</a></td>
<td><span class="label label-warning">Pending..</span></td>
</tr>
<tr>
<td>28</td>
<td><a href="javascript:void(0)">username28</a></td>
<td><span class="label">Inactive</span></td>
</tr>
<tr>
<td>29</td>
<td><a href="javascript:void(0)">username29</a></td>
<td><span class="label">Inactive</span></td>
</tr>
<tr>
<td>30</td>
<td><a href="javascript:void(0)">username30</a></td>
<td><span class="label label-inverse">Spam Account</span></td>
</tr>
</tbody>
</table>
</div>
<div class="span6">
<table id="example-datatables3" class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>#</th>
<th><i class="icon-user"></i> Username</th>
<th><i class="icon-bolt"></i> Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td><a href="javascript:void(0)">username1</a></td>
<td><span class="label label-success">Approved!</span></td>
</tr>
<tr>
<td>2</td>
<td><a href="javascript:void(0)">username2</a></td>
<td><span class="label label-info">Manual Approval</span></td>
</tr>
<tr>
<td>3</td>
<td><a href="javascript:void(0)">username3</a></td>
<td><span class="label label-inverse">Spam Account</span></td>
</tr>
<tr>
<td>4</td>
<td><a href="javascript:void(0)">username4</a></td>
<td><span class="label label-important">Unapproved</span></td>
</tr>
<tr>
<td>5</td>
<td><a href="javascript:void(0)">username5</a></td>
<td><span class="label label-info">Manual Approval</span></td>
</tr>
<tr>
<td>6</td>
<td><a href="javascript:void(0)">username6</a></td>
<td><span class="label label-inverse">Spam Account</span></td>
</tr>
<tr>
<td>7</td>
<td><a href="javascript:void(0)">username7</a></td>
<td><span class="label label-important">Unapproved</span></td>
</tr>
<tr>
<td>8</td>
<td><a href="javascript:void(0)">username8</a></td>
<td><span class="label label-inverse">Spam Account</span></td>
</tr>
<tr>
<td>9</td>
<td><a href="javascript:void(0)">username9</a></td>
<td><span class="label label-important">Unapproved</span></td>
</tr>
<tr>
<td>10</td>
<td><a href="javascript:void(0)">username10</a></td>
<td><span class="label label-important">Unapproved</span></td>
</tr>
<tr>
<td>11</td>
<td><a href="javascript:void(0)">username11</a></td>
<td><span class="label label-inverse">Spam Account</span></td>
</tr>
<tr>
<td>12</td>
<td><a href="javascript:void(0)">username12</a></td>
<td><span class="label label-success">Approved!</span></td>
</tr>
<tr>
<td>13</td>
<td><a href="javascript:void(0)">username13</a></td>
<td><span class="label label-inverse">Spam Account</span></td>
</tr>
<tr>
<td>14</td>
<td><a href="javascript:void(0)">username14</a></td>
<td><span class="label label-inverse">Spam Account</span></td>
</tr>
<tr>
<td>15</td>
<td><a href="javascript:void(0)">username15</a></td>
<td><span class="label label-important">Unapproved</span></td>
</tr>
<tr>
<td>16</td>
<td><a href="javascript:void(0)">username16</a></td>
<td><span class="label label-important">Unapproved</span></td>
</tr>
<tr>
<td>17</td>
<td><a href="javascript:void(0)">username17</a></td>
<td><span class="label label-info">Manual Approval</span></td>
</tr>
<tr>
<td>18</td>
<td><a href="javascript:void(0)">username18</a></td>
<td><span class="label label-success">Approved!</span></td>
</tr>
<tr>
<td>19</td>
<td><a href="javascript:void(0)">username19</a></td>
<td><span class="label label-success">Approved!</span></td>
</tr>
<tr>
<td>20</td>
<td><a href="javascript:void(0)">username20</a></td>
<td><span class="label label-warning">Pending..</span></td>
</tr>
<tr>
<td>21</td>
<td><a href="javascript:void(0)">username21</a></td>
<td><span class="label label-warning">Pending..</span></td>
</tr>
<tr>
<td>22</td>
<td><a href="javascript:void(0)">username22</a></td>
<td><span class="label label-important">Unapproved</span></td>
</tr>
<tr>
<td>23</td>
<td><a href="javascript:void(0)">username23</a></td>
<td><span class="label">Inactive</span></td>
</tr>
<tr>
<td>24</td>
<td><a href="javascript:void(0)">username24</a></td>
<td><span class="label label-inverse">Spam Account</span></td>
</tr>
<tr>
<td>25</td>
<td><a href="javascript:void(0)">username25</a></td>
<td><span class="label label-inverse">Spam Account</span></td>
</tr>
<tr>
<td>26</td>
<td><a href="javascript:void(0)">username26</a></td>
<td><span class="label label-info">Manual Approval</span></td>
</tr>
<tr>
<td>27</td>
<td><a href="javascript:void(0)">username27</a></td>
<td><span class="label label-warning">Pending..</span></td>
</tr>
<tr>
<td>28</td>
<td><a href="javascript:void(0)">username28</a></td>
<td><span class="label label-warning">Pending..</span></td>
</tr>
<tr>
<td>29</td>
<td><a href="javascript:void(0)">username29</a></td>
<td><span class="label label-info">Manual Approval</span></td>
</tr>
<tr>
<td>30</td>
<td><a href="javascript:void(0)">username30</a></td>
<td><span class="label label-warning">Pending..</span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<footer>
<script>var d = new Date(); if (d.getFullYear() === 2013) { document.write('2013'); } else { document.write('2013-' + d.getFullYear()); }</script> &copy; <strong>uAdmin 1.0</strong> - Crafted with <i class="icon-heart"></i> by <strong><a href="http://themeforest.net/user/pixelcave/portfolio?ref=pixelcave" target="_blank">pixelcave</a></strong>
</footer>
</div>
</div>
<a href="#" id="to-top"><i class="icon-chevron-up"></i></a>
<div id="modal-user-settings" class="modal hide">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4>Profile Settings</h4>
</div>
<div class="modal-body">
<ul id="example-user-tabs" class="nav nav-tabs">
<li class="active"><a href="#example-user-tabs-account"><i class="icon-cogs"></i> Account</a></li>
<li><a href="#example-user-tabs-profile"><i class="icon-user"></i> Profile</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="example-user-tabs-account">
<div class="alert alert-success">
<button type="button" class="close" data-dismiss="alert">&times;</button>
<strong>Success!</strong> Password changed!
</div>
<form class="form-horizontal" />
<div class="control-group">
<label class="control-label" for="example-user-username">Username</label>
<div class="controls">
<input type="text" id="example-user-username" class="disabled" value="administrator" disabled="" />
<span class="help-block">You can't change your username!</span>
</div>
</div>
<div class="control-group">
<label class="control-label" for="example-user-pass">Password</label>
<div class="controls">
<input type="password" id="example-user-pass" />
<span class="help-block">if you want to change your password enter your current for confirmation!</span>
</div>
</div>
<div class="control-group">
<label class="control-label" for="example-user-newpass">New Password</label>
<div class="controls">
<input type="password" id="example-user-newpass" />
</div>
</div>
</form>
</div>
<div class="tab-pane" id="example-user-tabs-profile">
<h5 class="page-header-sub hidden-phone">Image</h5>
<div class="form-horizontal hidden-phone">
<div class="control-group">
<img src="img/placeholders/image_dark_120x120.png" alt="image" />
</div>
<div class="control-group">
<form action="index.php" class="dropzone" />
<div class="fallback">
<input name="file" type="file" />
</div>
</form>
</div>
</div>
<form class="form-horizontal" />
<h5 class="page-header-sub">Details</h5>
<div class="control-group">
<label class="control-label" for="example-user-firstname">Firstname</label>
<div class="controls">
<input type="text" id="example-user-firstname" value="John" />
</div>
</div>
<div class="control-group">
<label class="control-label" for="example-user-lastname">Lastname</label>
<div class="controls">
<input type="text" id="example-user-lastname" value="Doe" />
</div>
</div>
<div class="control-group">
<label class="control-label" for="example-user-gender">Gender</label>
<div class="controls">
<select id="example-user-gender">
<option />Male
<option />Female
</select>
</div>
</div>
<div class="control-group">
<label class="control-label" for="example-user-birthdate">Birthdate</label>
<div class="controls">
<div class="input-append">
<input type="text" id="example-user-birthdate" class="input-small input-datepicker" />
<span class="add-on"><i class="icon-calendar"></i></span>
</div>
</div>
</div>
<div class="control-group">
<label class="control-label" for="example-user-skills">Skills</label>
<div class="controls">
<select id="example-user-skills" multiple="multiple" class="select-chosen">
<option selected="" />html
<option selected="" />css
<option />javascript
<option />php
<option />mysql
</select>
</div>
</div>
<div class="control-group">
<label class="control-label" for="example-user-bio">Bio</label>
<div class="controls">
<textarea id="example-user-bio" class="textarea-elastic" rows="3">Bio Information..</textarea>
</div>
</div>
<h5 class="page-header-sub">Social</h5>
<div class="control-group">
<label class="control-label" for="example-user-fb">Facebook</label>
<div class="controls">
<div class="input-append">
<input type="text" id="example-user-fb" />
<span class="add-on"><i class="icon-facebook"></i></span>
</div>
</div>
</div>
<div class="control-group">
<label class="control-label" for="example-user-twitter">Twitter</label>
<div class="controls">
<div class="input-append">
<input type="text" id="example-user-twitter" />
<span class="add-on"><i class="icon-twitter"></i></span>
</div>
</div>
</div>
<div class="control-group">
<label class="control-label" for="example-user-pinterest">Pinterest</label>
<div class="controls">
<div class="input-append">
<input type="text" id="example-user-pinterest" />
<span class="add-on"><i class="icon-pinterest"></i></span>
</div>
</div>
</div>
<div class="control-group">
<label class="control-label" for="example-user-github">Github</label>
<div class="controls">
<div class="input-append">
<input type="text" id="example-user-github" />
<span class="add-on"><i class="icon-github"></i></span>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-danger" data-dismiss="modal"><i class="icon-remove"></i> Close</button>
<button class="btn btn-success"><i class="icon-spinner icon-spin"></i> Save changes</button>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="js/vendor/jquery-1.8.3.min.js"%3E%3C/script%3E'));</script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script><script>
$(function(){$('#example-datatables').dataTable({ "aoColumnDefs": [ { "bSortable": false, "aTargets": [ 0 ] } ] });$('#example-datatables2').dataTable();$('#example-datatables3').dataTable();});
</script>
</body>
</html>